<template>
  <div
    class="common"
    :style="{
      background: `url(${categoriesDetailsBgImg}) 0px center no-repeat`,
      backgroundSize: 'cover',
    }"
  >
    <Header :light-index="3" background="transparent"></Header>
    <div v-if="isPC"><Footer fixed></Footer></div>
    <div class="content">
      <mu-paper v-if="isPC" class="pc-box" :z-depth="5">
        <mu-list>
          <div class="sub-title">分类-技术（100）</div>
          <mu-list-item button>
            <mu-list-item-title class="item">
              <span class="title">文章标题</span>
              <span>2021-02-04 20:30</span>
            </mu-list-item-title>
          </mu-list-item>
        </mu-list>
        <div class="pagination">
          <mu-pagination
            raised
            circle
            :total="100"
            :current.sync="page"
            :pageSize.sync="pageSize"
          ></mu-pagination>
        </div>
      </mu-paper>
      <div v-else class="wap-box">
        <div class="sub-title">分类-技术（100）</div>
        <mu-list>
          <mu-list-item button>
            <mu-list-item-title class="item">
              <span class="title">文章标题</span>
              <span>2021-02-04 20:30</span>
            </mu-list-item-title> </mu-list-item
          ><mu-list-item button>
            <mu-list-item-title class="item">
              <span class="title">文章标题</span>
              <span>2021-02-04 20:30</span>
            </mu-list-item-title> </mu-list-item
          ><mu-list-item button>
            <mu-list-item-title class="item">
              <span class="title">文章标题</span>
              <span>2021-02-04 20:30</span>
            </mu-list-item-title> </mu-list-item
          ><mu-list-item button>
            <mu-list-item-title class="item">
              <span class="title">文章标题</span>
              <span>2021-02-04 20:30</span>
            </mu-list-item-title> </mu-list-item
          ><mu-list-item button>
            <mu-list-item-title class="item">
              <span class="title">文章标题</span>
              <span>2021-02-04 20:30</span>
            </mu-list-item-title>
          </mu-list-item>
        </mu-list>
        <Footer></Footer>
      </div>
      <mu-button
        v-show="!isPC"
        small
        fab
        color="#fff"
        class="back-fab"
        @click="$router.push('/categories')"
      >
        <mu-icon color="#ccc" value="arrow_back"></mu-icon>
      </mu-button>
    </div>
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
export default {
  data () {
    return {
      categoriesDetailsBgImg: 'https://img0.baidu.com/it/u=1663022401,1299430061&fm=26&fmt=auto&gp=0.jpg',
      page: 1,
      pageSize: this.isPC ? 10 : 15
    }
  },

  components: {
    Header,
    Footer
  }
}
</script>
<style lang="less" scoped>
.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 64px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}
</style>
